/*
 * @Description: 分货调整页面
 * @Version: 1.0
 * @Autor: c-jack.qian
 * @Date: 2020-10-21 17:30:52
 * @LastEditors: c-jack.qian
 * @LastEditTime: 2021-04-25 16:47:40
 */
import React, { useMemo } from 'react';
import { PageHeaderWrapper } from 'hzero-boot/lib/components/Page';
import { Button, DataSet, notification, Table } from 'choerodon-ui/pro';
import { ButtonColor, FuncType } from 'choerodon-ui/pro/lib/button/enum';
import { useDataSet } from 'hzero-front/lib/utils/hooks';
import { DataSetProps } from 'choerodon-ui/pro/lib/data-set/DataSet';
import {
  ColumnLock,
  TableColumnTooltip,
} from 'choerodon-ui/pro/lib/table/enum';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import intl from 'utils/intl';
import querystring from 'querystring';
import { orderDistributionDS } from '../../stores/orderDistributionDS';
import { renderSort } from '../../utils/utilsFun';

notification.config({
  duration: 3,
  placement: 'bottomRight',
});
interface propstype {
  dispatch: any;
}

const ClassPage: React.FC<propstype> = ({dispatch}) => {
  const tableDS = useDataSet(() => new DataSet(orderDistributionDS() as DataSetProps));


  const handleToDetail = (record) => {
    const quotaOrderId = record.get('quotaOrderId') 
    dispatch(
      routerRedux.push({
        pathname: `/o2om/order-distribution/create`,
        search: querystring.stringify({
          params: encodeURIComponent(JSON.stringify({id :quotaOrderId})),
        }),
      })
    )
  }

  
  const handleCreate = () => {
    dispatch(
      routerRedux.push({
        pathname: `/o2om/order-distribution/create`,
      })
    )
  }

  const Columns = useMemo<any>(
    () => [
      {
        header: intl.get(`dji.otc.om.view.field.serialNumber`).d('序号'),
        width: 50,
        lock: true,
        renderer: ({ record }) => renderSort(record, tableDS),
      },
      {
        name: 'quotaCode',
        align: 'left',
        tooltip: TableColumnTooltip.always,
        lock: true,
      },
      { name: 'quotaMonth', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'regionName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'areaName', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'businessGroup', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'quotaStatusMeaning', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'approveStatusMeaning', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'createdBy', align: 'left', tooltip: TableColumnTooltip.always },
      { name: 'creationDate', align: 'left', tooltip: TableColumnTooltip.always },
      {
        header: intl.get('dji.otc.om.view.field.operationColumn').d('操作'),
        width: 150,
        lock: ColumnLock.right,
        command: ({ record }) => {
          return [
            <Button
              funcType={'flat' as FuncType}
              key="look"
              onClick={() => {
                handleToDetail(record);
              }}
            >
              <a key="look">{intl.get(`dji.otc.om.view.field.lookDetail`).d('查看明细')}</a>
            </Button>,
            <Button
              funcType={'flat' as FuncType}
              key="delete"
              onClick={() => {
                tableDS.delete(record);
              }}
            >
              <a key="delete">{intl.get(`dji.otc.om.view.button.delete`).d('删除')}</a>
            </Button>,
          ];
        },
      },
    ],
    []
  );


  return (
    <PageHeaderWrapper
      title={intl.get('dji.otc.om.view.menu.orderDistribution').d('订单分货')}
      header={
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <Button onClick={() => handleCreate()} color={ButtonColor.primary}>
            {intl.get(`dji.otc.om.view.button.create`).d('新建')}
          </Button>
        </div>
      }
    >
      <Table
        dataSet={tableDS}
        border
        queryFieldsLimit={3}
        columns={Columns}
      />
    </PageHeaderWrapper>
  );
};

export default connect()(ClassPage);
